<template>
  <div class="examination">
    <div class="examinationTop">
      <div class="examinationName">
        <p>考试名称：</p>
        <el-input v-model="examPaper" placeholder="请输入考试名称"></el-input>
      </div>
      <div class="examinationNum">
        <p class="examinationText">考试类型：</p>
        <el-select v-model="examType" placeholder="请选择考试类型">
          <el-option
            v-for="(item, index) in kaoshiList"
            :key="index"
            :label="item.typeName"
            :value="item.typeName"
          ></el-option>
        </el-select>
      </div>
      <div class="moreBtn">
        <el-button
          type="primary"
          @click="searchBtn"
          class="searchBtn"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" @click="refreshBtn" class="refreshBtn"
          >重置</el-button
        >
      </div>
    </div>
    <div class="TeachingPlanBottom">
      <div class="add">
        <el-button type="primary" @click="addExamination" class="refreshBtn"
          >新增考试</el-button
        >
        <el-button type="danger" @click="delExamination" class="refreshBtn"
          >批量删除</el-button
        >
      </div>
      <div class="operationBtns">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
          :cell-style="{ textAlign: 'center' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column label="考试名称" prop="examPaper"> </el-table-column>
          <el-table-column label="考试类型" prop="examType"> </el-table-column>
          <el-table-column prop="examTime" label="考试时间"> </el-table-column>
          <el-table-column prop="examineeNum" label="考生人数">
            <template slot-scope="scope">
              <div>
                {{ scope.row.studentIds.split(",").length }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userRoomNo" label="考场">
            <template slot-scope="scope">
              <div>
                <el-tag
                  v-for="(item, index) in JSON.parse(
                    scope.row.examinationRoomInformation
                  )"
                  :key="index"
                  type="success"
                  >{{ item.roomName }}</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="开考状态" type="openingStatus">
            <template slot-scope="scope">
              <div>
                <el-tag v-if="scope.row.examStatus == 0" type="success"
                  >未开始</el-tag
                >
                <el-tag v-if="scope.row.examStatus == 1">考试中</el-tag>
                <el-tag v-if="scope.row.examStatus == 2" type="danger"
                  >停考</el-tag
                >
                <el-tag v-if="scope.row.examStatus == 3" type="warning"
                  >已结束</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="300">
            <template slot-scope="scope">
              <div class="haed">
                <el-button
                  type="primary"
                  @click="edit(scope.row)"
                  class="refreshBtn"
                  size="small"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  @click="edits(scope.row)"
                  class="refreshBtn"
                  size="small"
                  >停考</el-button
                >
                <el-button
                  type="danger"
                  @click="remove(scope.row)"
                  class="searchBtn"
                  size="small"
                  >删除</el-button
                >
                <el-button
                  type="success"
                  @click="preview(scope.row)"
                  class="searchBtn"
                  size="small"
                  >详情</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            ref="pagination"
            :total="total"
          >
          </el-pagination> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <el-button class="sure" type="primary">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getExaminationListApi,
  delTextPagerApi,
  editExaminationApi,
  getRoomList,
} from "@/api/testManagement/Examination.js";
import { getClassifyListApi } from "../../api/basics/classify.js";
export default {
  name: "QuestionBank",
  data() {
    return {
      examinationNum: "", // 考试期次
      examPaper: "", // 考试名称
      total: 0, // 总条数
      tableData: [], // table数据
      currentPage: 0, //页码
      dialogFormVisible: false, // 弹框开关
      idList: [],
      examType: "", //考试类型
      pageNum: 1,
      pageSize: 10,
      kaoshiList: [], //考试类型列表
    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳到第";
    // this.getQuertionBankList()
    // getGradeListApi().then(res=>{
    //     console.log(res,'------------');
    //     this.gradeOptions = res.rows
    // })
    this.getList();
  },
  methods: {
    // 批量删除
    async delExamination() {
      this.$confirm("此操作将永久删除考试, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await delTextPagerApi(this.idList);
          console.log(data);
          if (data.code == 200) {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async edits(row) {
      console.log(row);
      let ruleForm = {
        examPaper: row.examPaper, // 考试名称
        examTime: row.examTime, // 考试时间
        examinationDate: row.examinationDate, //考试日期
        examType: row.examType, // 考试类型
        answerTime: row.answerTime, // 答题时间
        examExplain: row.examExplain, //考试说明
        studentIds: row.studentIds, //学生ID
        examStatus: 2,
        locName: row.locName, //考点
        examinationRoomInformation: JSON.parse(row.examinationRoomInformation),
        paperInformation: JSON.parse(row.paperInformation),
        examId: row.examId,
      };
      const data = await editExaminationApi(ruleForm);
      if (data.code == 200) {
        this.getList();
        this.$message({
          type: "success",
          message: "已停考!",
        });
      }
    },
    async getList() {
      const data2 = await getClassifyListApi({ parentId: 147 });
      const data3 = await getRoomList();
      const list = await getExaminationListApi({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      });
      console.log(list, "=========================");
      this.total = list.total;
      this.tableData = list.rows;
      this.kaoshiList = data2.rows;
      this.tableData.forEach((item) => {
        data2.rows.forEach((ite) => {
          if (item.examType == ite.typeId) {
            item.examType = ite.typeName;
          }
        });
        data3.rows.forEach((ite) => {
          if (item.userRoomNo == ite.id) {
            item.userRoomNo = ite.roomName;
          }
        });
      });
    },
    // table选中事件
    handleSelectionChange(e) {
      let list = [];
      e.forEach((item) => {
        list.push(item.examId);
      });
      this.idList = list;
      console.log(this.idList);
    },
    // 新增考试
    addExamination() {
      this.$router.push("/testManagement/AddExaminationItem");
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    sureBtn() {
      this.dialogFormVisible = false;
    },
    // 预览
    preview(row) {
      console.log(row.examId);
      this.$router.push("/testManagement/ExaminationDetail?id=" + row.examId);
    },
    // 修改
    edit(row) {
      console.log(row);
      this.$router.push("/testManagement/AddExaminationItem?id=" + row.examId);
    },
    // 删除
    remove(row) {
      console.log(row);
      this.$confirm("此操作将永久删除考试, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let ids = [];
          ids.push(Number(row.examId));
          const data = await delTextPagerApi(ids);
          console.log(data);
          if (data.code == 200) {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取列表数据
    async getQuertionBankList() {},
    removeHtmlStyle(html) {
      let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式
      let relTag = /<.+?>/g; //去除标签
      let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g; // 清除类名
      let newHtml = "";
      if (html) {
        newHtml = html.replace(relStyle, "");
        newHtml = newHtml.replace(relTag, "");
        newHtml = newHtml.replace(relClass, "");
      }
      return newHtml;
    },
    // 搜索
    async searchBtn() {
      let obj = {
        examPaper: this.examPaper,
        examType: this.examType,
      };
      let obj1 = {};
      for (let key in obj) {
        if (
          (obj[key] === 0 || obj[key]) &&
          obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
        ) {
          // 保存属性
          obj1[key] = obj[key];
        }
      }
      obj1.pageNum = this.pageNum;
      obj1.pageSize = this.pageSize;
      const list = await getExaminationListApi(obj1);
      this.tableData = list.rows;
      const data2 = await getClassifyListApi({ parentId: 147 });
      const data3 = await getRoomList();
      this.tableData.forEach((item) => {
        data2.rows.forEach((ite) => {
          if (item.examType == ite.typeId) {
            item.examType = ite.typeName;
          }
        });
        data3.rows.forEach((ite) => {
          if (item.userRoomNo == ite.id) {
            item.userRoomNo = ite.roomName;
          }
        });
      });
    },

    // 重置
    refreshBtn() {
      this.examPaper = "";
      this.examType = "";
      this.getList();
    },

    // table选中事件
    selectionChange() {},

    // 分页事件
    handleSizeChange(e) {
      this.pageSize = e;
      this.getList();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getList();
    },
    // 创建题目
    addCollege() {},
  },
};
</script>

<style lang="scss" scoped>
.examination {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  .examinationTop {
    min-width: 100vh;
    width: 100%;
    // height: 80px;
    display: flex;
    font-size: 14px;
    // justify-content: space-between;
    align-items: center;
    background: #fff;
    flex-wrap: wrap;
    border-radius: 10px 10px 0 0;
    padding: 0 20px;
    // box-shadow: 0px 4px 3px #ccc;

    .examinationNum,
    .examinationName {
      display: flex;
      flex-wrap: nowrap;
      text-align: center;
      align-items: center;
      margin: 20px 0;
      width: 220px;
      p {
        text-align: right;
        width: 112px;
      }
      .el-input {
        width: 170px;
      }
    }
    .moreBtn {
      width: 200px;
      margin: 20px;
      display: flex;
      .searchBtn {
        color: white;
        border: none;
        background-color: rgb(123, 180, 208);
      }
      .refreshBtn {
        color: white;
        border: none;
        background-color: rgb(108, 207, 204);
      }
      .newAdd {
        border: none;
        background-color: rgb(86, 164, 212);
      }
    }
  }
  .TeachingPlanBottom {
    width: 100%;
    flex: 1;
    background-color: white;
    padding: 0 20px;
    // margin-top: 10px;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    min-width: 100vh;
    // .infoTeachingPlanBottom {
    height: 100%;

    .operationBtns {
      width: 100%;
      // height: 60px;
      // display: flex;
      // align-items: center;
      margin-top: 10px;
      // flex-direction: column;
      overflow-y: auto;
      // justify-content: space-between;
      // .setBtnsLeftTitle {
      //     width: 200px;
      //     font-size: 16px;
      //     font-weight: 600;
      //     color: rgb(57, 141, 220);
      //     p {
      //         width: 100px;
      //     }
      // }
      .moreBtn {
        display: flex;
      }
      .haed {
        align-items: center;
        color: rgb(135, 173, 218);
        display: flex;
        justify-content: space-around;
        .setPlan {
          margin-left: 10px;
        }
      }

      ::v-deep .el-table thead tr {
        background-color: #f2f8fb !important;
      }
      ::v-deep .el-table tr:nth-child(2n) {
        background-color: #f9f9f9;
      }
      .edit {
        width: 15px;
        height: 15px;
        margin-left: 10px;
      }
      .del {
        width: 15px;
        height: 15px;
        margin-left: 10px;
      }
      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #86caf0;
        border-color: #86caf0;
      }

      ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #86caf0;
        border-color: #86caf0;
      }
      .el-icon-delete {
        color: red;
        font-weight: bold;
        margin-left: 15px;
        font-size: 18px;
      }
      .el-icon-edit-outline {
        font-size: 18px;
        font-weight: bold;
        color: rgb(142, 198, 216);
      }
      .share {
        margin-left: 15px;
      }
      ::v-deep .el-checkbox__input .is-checked .el-checkbox__inner {
        background: red !important;
      }
    }
    // .tableData {
    //     width: 100%;
    //     overflow-y: auto;

    // }
  }
  ::v-deep .el-dialog {
    width: 600px;
    height: 550px;
    border-radius: 10px 10px 0 0;
    .el-dialog__header {
      border-radius: 10px 10px 0 0;
      text-align: center;
      background-color: rgb(72, 149, 219);
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
    }
    .dialog-footer {
      text-align: center;
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      .cancel {
        border: none;
        color: #848383;
        background-color: #f0f0f0;
      }
      .determine {
        border: none;
        background-color: #4995dc;
      }
    }
    .infoDialog {
      // width: 700px;
      // height: 500px;
      .grade {
        width: 100%;
        height: 40px;
        .gradeBox {
          display: flex;
          p:first-child {
            width: 80px;
          }
        }
        .subject {
          display: flex;
          margin-top: 10px;
          p:first-child {
            width: 80px;
          }
        }
      }
      .testQuestions,
      .stem,
      .bidAnswers,
      .analysis,
      .fraction,
      .difficulty,
      .Knowledge {
        display: flex;
        width: 100%;
        height: 40px;
        align-items: center;
        p:first-child {
          width: 80px;
          // text-align: right;
        }
      }
    }
  }
  .block {
    padding: 0 20px 0 0;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: #fff;

    ::v-deep .btn-prev {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }

    ::v-deep .btn-next {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-pager li {
      background: #fff;
      font-size: 13px;
      min-width: 30.5px;
      height: 28px;
      line-height: 28px;
      box-sizing: border-box;
    }

    ::v-deep .el-pager li.active {
      background-color: #4895db;
      color: #fff;
      cursor: default;
    }
    ::v-deep .number {
      border: solid 1px #e6e6e6;
      margin: 0 5px;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-button {
      height: 28px;
      line-height: 0;
    }
    .sure {
      width: 50px;
      height: 30px;
      line-height: 0;
      text-align: center;
      padding: 0;
    }
  }
}
</style>
